<template>
	<view>
		<!-- 头部：搜索框 + 城市选择 -->
		<view class="header-container">
			<!-- 城市选择，点击弹出选择面板 -->
			<view class="city" @click="showCitySelector = true">
				<text>{{ selectedCity }}</text>
				<u-icon name="arrow-down" size="24rpx" color="#666" class="city-arrow"></u-icon>
			</view>

			<u-search placeholder="搜索医生、药品等" v-model="keyword" :animation="true" class="search-box"></u-search>
		</view>

		<!-- 城市选择器弹窗 -->
		<u-picker :show="showCitySelector" :columns="cityList" @confirm="onCityConfirm"
			@cancel="showCitySelector = false" title="选择城市"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				// 城市选择相关
				showCitySelector: false,
				selectedCity: '福建',
				cityList: [
					['北京', '上海', '广州', '深圳', '杭州', '南京', '成都', '武汉',
						'重庆', '西安', '天津', '苏州', '郑州', '长沙', '青岛'
					]
				]
			}
		},
		onLaunch() {
			// 可以从本地存储或接口加载最近选择的城市
			const lastCity = uni.getStorageSync('lastSelectedCity');
			if (lastCity) {
				this.selectedCity = lastCity;
			}
		},
		methods: {
			// 确认选择城市
			onCityConfirm(e) {
				this.selectedCity = e.value[0];
				this.showCitySelector = false;
				// 保存到本地存储
				uni.setStorageSync('lastSelectedCity', this.selectedCity);
				// 可以在这里添加城市切换后的逻辑，如重新加载数据等
				this.$emit('cityChange', this.selectedCity);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-container {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.city {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #333;
		margin-right: 16rpx;
		padding: 8rpx 0;

		// 添加点击反馈
		&:active {
			opacity: 0.8;
		}
	}

	.city-arrow {
		margin-left: 8rpx;
		transition: transform 0.3s;

		// 点击时箭头旋转效果
		.city:active & {
			transform: rotate(180deg);
		}
	}

	.search-box {
		flex: 1;
		--u-search-bg-color: #f5f5f5;
		--u-search-input-height: 72rpx;
		--u-search-input-font-size: 28rpx;
		--u-search-border-radius: 36rpx;
		--u-search-icon-color: #999;
		--u-search-placeholder-color: #999;
	}
</style>